<template>
  <div class="user-list">
    <page-header title="作品列表">
      <page-search :config="searchConfig" :model="searchModel" @search="getData" />
    </page-header>
    <el-table
      :data="tableData"
      :cell-class-name="setCellClassName"
      :max-height="clientHeight - 250"
      >
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :min-width="column.minWidth"
        :label="column.label">
        <template slot-scope="{ row }">
          <el-avatar v-if="column.prop === 'userAvatar'" :size="42" :src="row.userAvatar"></el-avatar>
          <template v-else-if="column.prop === 'thumbCount' && row.isEidting">
            <el-input size="small" v-model="row.thumbCount"></el-input>
          </template>
          <template v-else>{{row[column.prop]}}</template>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="80px"
      >
        <template slot-scope="{ row }">
          <action-text @click="modifyLikes(row)" v-if="!row.isEidting">修改点赞量</action-text>
          <template v-else>
            <action-text @click="cancelModify(row)">取消</action-text>
            <action-text @click="confirmModify(row)">确定</action-text>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <page-pagination
      :pageSize="pageSize"
      :currentPage="pageNum"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import paginationMixin from '@/mixins/pagination';
import { getWorkList, modifyWorkThumbCount } from '@/api/works';

export default {
  data() {
    return {
      searchConfig: [
        {
          type: 'input',
          label: '用户名',
          prop: 'userName',
        },
        {
          type: 'input',
          label: '学员编号',
          prop: 'studentNo',
        },
      ],
      searchModel: {
        userName: '',
        studentNo: '',
      },
      columns: [
        { prop: 'title', label: '作品名', minWidth: '140px' },
        { prop: 'thumbCount', label: '点赞量', minWidth: '80px' },
        { prop: 'userName', label: '用户名', minWidth: '120px' },
        { prop: 'userAvatar', label: '头像', minWidth: '100px' },
        { prop: 'studentNo', label: '学号', minWidth: '80px' },
        { prop: 'createTime', label: '创建时间', minWidth: '120px' },
      ],
      tableData: [],
    };
  },
  mixins: [paginationMixin],
  methods: {
    setCellClassName({ column }) {
      if (column.property === 'userAvatar') {
        return 'image-cell';
      }
      return '';
    },
    cancelModify(row) {
      row.likes = row.temp;
      delete row.temp;
      row.isEidting = false;
    },
    modifyLikes(row) {
      row.isEidting = true;
      row.temp = row.likes;
    },
    async confirmModify(row) {
      const { id, thumbCount } = row;
      await modifyWorkThumbCount({ id, thumbCount });
      await this.getData();
      this.$message.success('修改成功');
      row.isEidting = false;
    },
    async getData() {
      const result = await getWorkList(this.searchParams);
      const { total, list } = result;
      this.total = total;
      this.tableData = list.map((item) => {
        const { createTime } = item;
        return {
          ...item,
          isEidting: false,
          createTime: this.$formatTime(createTime),
        };
      });
    },
  },
  async created() {
    this.getData();
  },
};
</script>
